<div [@routerTransition]>
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto col-xs-6">
                <h3 class="m-subheader__title ">
                    <span>型号收支记录</span>
                </h3>
                <span>
                    <span style="margin-left:10px;">选择时间：</span>
                    <div style="width:520px;display:inline-block;">
                        <p-calendar [(ngModel)]="selectedDate" view="month" name="cal" dateFormat="yy-mm" [yearNavigator]="true" yearRange="2000:2030"
                            [locale]="calendarHelper.cn"></p-calendar>
                        <button class="btn btn-primary" type="button" (click)="getReport()" style="margin-left: 20px;">
                            查询
                        </button>
                        <button class="btn btn-primary" type="button" (click)="createOrEditSzReportModal.show()" style="margin-left: 20px;">
                            录入
                        </button>
                    </div>

                </span>



            </div>



        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="row" style="color: #097e98; font-weight: 700; font-size: 17px;">
                    <div class="col-6">天津收支报表</div>

                </div>
                <table class="report table">
                    <thead>
                        <tr>
                            <th colspan="1" rowspan="2" style="vertical-align: middle;">型号</th>
                            <th colspan="4" style="text-align: center;">费用</th>
                            <th colspan="8" style="text-align: center;">成本</th>
                        </tr>
                        <tr>

                            <th>暂结价</th>
                            <th>
                                合同金额</th>
                            <th>已收款总额</th>
                            <th>已结算总额</th>
                            <th style="border-left: 2px solid #f4f5f8;">实际发生成本总额</th>
                            <th>已结算成本</th>
                            <th>外协代付</th>
                            <th>物资代付</th>
                            <th>代付合计</th>
                            <th>实际成本</th>
                            <th>模拟管理费</th>
                            <th>全成本</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let row of tabledata">
                            <th scope="row">{{ row.modelCode }}</th>
                            <td>{{ row.temporaryPrice }}</td>
                            <td>{{ row.contractPrice }}</td>
                            <td>{{ row.totalReceipts }}</td>
                            <td>{{ row.totalSettlement }}</td>
                            <td style="border-left: 2px solid #f4f5f8;">{{ row.actualCost }}</td>
                            <td>{{ row.settledCost }}</td>
                            <td>{{ row.outsourcePayment }}</td>
                            <td>{{ row.materialsPayment }}</td>
                            <td>{{ row.totalPayment }}</td>
                            <td>{{ row.totalPayment}}</td>
                            <td>{{ row.managementCost }}</td>
                            <td>{{ row.totalCost }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <createOrEditSzReportModal #createOrEditSzReportModal (modalSave)="getReport()"></createOrEditSzReportModal>
</div>
